hellrisingfandomcom-20200214-history
Guides/Templates and Tables
=Summary= This guide aims to explain how to use templates and tables together and define the difference between them. A basic level of wiki knowledge is expected (such as bolding ect). By the end you should be able to make a template similar to a flagbox as show in the Making Templates guide. =Definitions= Most people (including me the Author) commonly confuse the definitions of templates and tables together. Most people think that the colour boxes with pictures are templates. Although they can be templates they are usually comprised of tables. A template can also just be a long list of text. Specifically this will be looking at tables to produce something that looks like this. Templates A template is best defined as something which can be called so that people don't have to keep typing in the same code over and over again. Different values can be passed into templates to change their appearance or other aspects about them. A template could even just be something which returns the value which is passed into it. However this would not be very useful in most cases. Tables A table consists of rows and columns. Each table has what is called a cell, you can place whatever you want inside these cells. The best way to explain a table is to show it. =Getting started= Ok, the first thing you need to know is how to open a table, it's quite simple. It starts off with a to get As you would have noticed this table is lacking borders so we will want to set one to it. There are many ways of doing this, however while we are getting the concept of tables down we shall use the simple way. All we do is add in border="1" and get That is much nicer. Experiment with this basic principal of rows and columns before continuing on. =Styles= A style is an atribute for a table, row or cell that determines the apperance of it. There are many values that can be assigned, however this will only look at a few of them. The first thing that needs to be learned is how to assign a style to a cell/row/table. Lets take for example the background colour of a cell. We'll first create our table using the following code. It currently looks like any other table at the moment, however we can change the colours by specifying the style before a cell. This is done by adding in a section (similar to adding in another cell) with the information of style="background-color: #F00" (Note, colours are specified by #RGB where RGB are the Red, Green, Blue values in hexadecimal) (Extra colours added in for display purposes) So what happens when we want to add in width as well as colour. Well thats simple, after each value you assign you add in a semi-colon (;). So if you wanted to specify the width and colour you would have style="background-color: #888; width=200px". So in this example we have lets assign the styles to the whole table and individual rows as well as cells. As you can see the whole table is purple, however all of the cells which have not been asigned a colour in the first row have the value of #077. List of style variables This is a list of useful general purpose style variables. Note - There are many more, however for the purpose of this tutorial these are the main ones we will look at. =Other Variables= There are a few other useful variables which are seperate to the style variables. They are used in a similar way to the style variables, however there are subtle differences that you must take into consideration. The first is to remember that we don't use to use semi-colons (;) in order to seperate the variables. All that is needed is a space. For example. Currently as it is each cell spans only over one row and one column. However by adding rowspan to a cell we are able to make the cell taller. As you can see from this example by still using three cells in the 2nd row it has pushed them to the side. When you are making tables and using rowspan you must leave out the corresponding cell in the rows below which the cell spans onto. As of such you would want something more along the lines of this as it's less messy and looks nicer. Using these basic principals you should be able to, or at least very close to constructing a table similar to the one a the top of this page. Practice using rowspan until you are familiar with it and the continue on. List of Other variables These variables can be applied to either individual cells, rows or even tables unless specifically stated otherwise. Note - There are many more, however for the purpose of this tutorial these are the main ones we will look at. =Using images= This is one of the most important parts in making a table which is aesthetically pleasing, the images. And they are very simple as well. Once you have uploaded your image or found your image on the wiki all you have to do is link it just like any other page. However you may want to make your image smaller, thats alright. This is how we do it. Say we have our image Star.gif. If we used the image just as it is it would be way to large to use in a table nicely. So we would like to resize it so it's smaller. All we do is add to it a |x px]] to the end of it. That would make the code look like this. And thats all there is to it. A simple but effective technique that can be used to help make things look nicer. =Passing values into templates= The last thing that you need to know about templates is how to pass values into them. First in our template we define our values. We can do this in one of two ways. The first is by using an incremental number, the second is by giving the variable a name. These values are defined using }. Ok, thats simple enough, a simple templates code could look like this. This is a template, from what I've been told your name is Alternitvaly it could also look like this. This is a template, from what I've been told your name is } Both of these are valid, however the useage when calling them are very different, but are just as easy. When you call your template if you are using a named variable you do it in the following way. Note the vertical line (|), this is important for seperating the variables. When using an un-named variable. You don't include the variable name or the equals sign, however the vertical line (|) is still important. =Making that inital table= Here is the challanging part, I want you to make a table which looks exactly like the first one shown. Everything you need to know is in this tutorial and if you have been practicing during it then you should be able to it. Once you can do that you have completed this tutorial.